<template>
  <div>
    <div class="top">
      <el-button type="success" :disabled="selectFileIdList.length == 0" @click="revertBatch">
        <span class="iconfont icon-revert"></span>还原
      </el-button>
      <el-button type="danger" :disabled="selectFileIdList.length == 0" @click="delBatch">
        <span class="iconfont icon-del"></span>批量删除
      </el-button>
    </div>

    <div class="file-list">
      <Table :columns="columns" :showPagination="true" :dataSource="tableData" :fetch="loadDataList"
        :options="tableOptions" @rowSelected="rowSelected">
        <template #fileName="{ index, row }">
          <div class="file-item" @mouseenter="showOp(row)" @mouseleave="cancelShowOp(row)">
            <icon :fileType="row.fileType"></icon>
            <span class="file-name" :title="row.fileName">
              <span>{{ row.fileName }}</span>
            </span>
            <span class="op">
              <template v-if="row.showOp && row.fileId">
                <span class="iconfont icon-revert" @click="revert(row)">还原</span>
                <span class="iconfont icon-del" @click="delFile(row)">删除</span>
              </template>
            </span>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/http.js";
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const api = {
  loadDataList: "/recycle/loadRecycleList",
  delFile: "/recycle/delFile",
  recoverFile: "/recycle/recoverFile",
};

onMounted(() => {
  loadDataList();
});

//列表
const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
  },
  {
    label: "删除时间",
    prop: "deleteTime",
    width: 200,
  },
  {
    label: "有效期",
    prop: "expirationTime",
    width: 200,
  },
  {
    label: "",
    prop: "",
    width: 100,
  },
];
//列表
const tableData = ref({
  pageNo: 1,
  pageSize: 10,
  total: 20,
  list: [
    
  ],
});

const tableOptions = {
  extHeight: 20,
  selectType: "checkbox",
};
const loadDataList = async () => {
  const result = await http.get(
    'recycle/getRecycle',
  )
  tableData.value.list = result.data;

  const tenDaysFromNow = new Date();
tenDaysFromNow.setDate(tenDaysFromNow.getDate() + 10); // 计算十天后的日期

const currentTime = new Date(); // 当前时间

tableData.value.list.forEach(item => {
  const deleteTime = new Date(item.deleteTime); // 将 deleteTime 转为日期对象
  const timeDiff = 10*24 - Math.ceil((currentTime - deleteTime) / (1000 * 60 * 60)); // 计算时间差（小时）

  if (timeDiff > 24) {
    // 如果时间差大于24小时，向下取整显示天数
    const daysLeft = Math.floor(timeDiff / 24);
    item.expirationTime = `${daysLeft} 天`;
  } else if (timeDiff > 0) {
    // 如果小于24小时，显示剩余小时数
    item.expirationTime = `${timeDiff} 小时`;
  } else {
    // 如果已经过期
    item.expirationTime = '已过期';
  }
});
};

//展示操作按钮
const showOp = (row) => {
  tableData.value.list.forEach((element) => {
    element.showOp = false;
  });
  row.showOp = true;
};

const cancelShowOp = (row) => {
  row.showOp = false;
};

const selectFileIdList = ref([]);
const recycleIdList = ref([]);
const rowSelected = (rows) => {
  selectFileIdList.value = [];
  rows.forEach((item) => {
    selectFileIdList.value.push(item.fileId);
    recycleIdList.value.push(item.recycleId);
  });
};

//恢复
const revert = (row) => {
  proxy.Confirm(`你确定要还原【${row.fileName}】吗？`,  async () => {
    await http.get('recycle/restoreFiles', {
      params: {
        fileIds: row.fileId,
        recycleIds: row.recycleId,
      },
    });
    // 确保在确认删除之后，再执行下面的操作
  loadDataList();
  emit("reload");
  });
};

const revertBatch = () => {
  if (selectFileIdList.value.length == 0) {
    return;
  }
  proxy.Confirm(`你确定要还原这些文件吗？`,async () => {
    await http.get('recycle/restoreFiles', {
      params: {
        fileIds: selectFileIdList.value.join(","),
        recycleIds: recycleIdList.value.join(","),
      },
    });
    loadDataList();
    emit("reload");
  });
};
//删除文件
const emit = defineEmits(["reload"]);
const delFile = async (row) => {
  await proxy.Confirm(`你确定要删除【${row.fileName}】？`, async () => {
    await http.get('recycle/delFiles', {
      params: {
        fileIds: row.fileId,
        recycleIds: row.recycleId,
      },
    });
    // 确保在确认删除之后，再执行下面的操作
  loadDataList();
  emit("reload");
  });
};
const delBatch = (row) => {
  if (selectFileIdList.value.length == 0) {
    return;
  }
  proxy.Confirm(`你确定要删除选中的文件?删除将无法恢复`, async () => {
    await http.get('recycle/delFiles', {
      params: {
        fileIds: selectFileIdList.value.join(","),
        recycleIds: recycleIdList.value.join(","),
      },
    });
    loadDataList();
    emit("reload");
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/file.list.scss";

.file-list {
  margin-top: 10px;

  .file-item {
    .op {
      width: 120px;
    }
  }
}
</style>